<template>
	<view class="container">
		<!-- 顶部工具栏 -->
		<view class="top-toolbar">
			<picker 
				mode="selector" 
				:value="selectedIndex" 
				:range="reservoirOptions" 
				range-key="stnm" 
				@change="onReservoirChange"
				class="reservoir-picker"
			>
				<view class="picker-container">
					<view class="picker-icon">
						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" fill="currentColor"/>
						</svg>
					</view>
					<text class="picker-label">{{ selectedReservoir ? selectedReservoir.stnm : '选择水库' }}</text>
					<view class="picker-arrow">
						<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M7 10l5 5 5-5z" fill="currentColor"/>
						</svg>
					</view>
				</view>
			</picker>
		</view>

		<!-- 主菜单 -->
		<view class="main-tab-bar" v-if="selectedReservoir">
			<view 
				class="main-tab-item" 
				:class="{ active: activeMainTab === 'rainfall' }"
				@click="switchMainTab('rainfall')"
			>
				<text class="main-tab-text">雨情</text>
				<view class="tab-indicator" v-if="activeMainTab === 'rainfall'"></view>
			</view>
			<view 
				class="main-tab-item" 
				:class="{ active: activeMainTab === 'water' }"
				@click="switchMainTab('water')"
			>
				<text class="main-tab-text">水情</text>
				<view class="tab-indicator" v-if="activeMainTab === 'water'"></view>
			</view>
			<view 
				class="main-tab-item" 
				:class="{ active: activeMainTab === 'windfield' }"
				@click="switchMainTab('windfield')"
			>
				<text class="main-tab-text">东三省天气预报</text>
				<view class="tab-indicator" v-if="activeMainTab === 'windfield'"></view>
			</view>
		</view>

		<!-- 二级菜单 - 雨情 -->
		<view class="sub-tab-bar" v-if="selectedReservoir && activeMainTab === 'rainfall'">
			<view 
				class="sub-tab-item" 
				:class="{ active: activeSubTab === 'rainfall-measured' }"
				@click="switchSubTab('rainfall-measured')"
			>
				<view class="sub-tab-content">
					<view class="sub-tab-icon">📊</view>
					<text class="sub-tab-text">实测</text>
				</view>
			</view>
			<view 
				class="sub-tab-item" 
				:class="{ active: activeSubTab === 'rainfall-forecast' }"
				@click="switchSubTab('rainfall-forecast')"
			>
				<view class="sub-tab-content">
					<view class="sub-tab-icon">🔮</view>
					<text class="sub-tab-text">预报</text>
				</view>
			</view>
		</view>



		<!-- 雨情实测组件 -->
		<ReservoirDetail 
			v-if="selectedReservoir && activeMainTab === 'rainfall' && activeSubTab === 'rainfall-measured'"
			:basin-code="selectedReservoir.stcd"
			@refresh="handleRefresh"
			ref="reservoirDetailRef"
		/>

		<!-- 雨情预报组件 -->
		<view 
			v-if="selectedReservoir && activeMainTab === 'rainfall' && activeSubTab === 'rainfall-forecast'"
			class="forecast-container"
		>
			<text class="forecast-title">雨情预报</text>
			<text class="forecast-desc">预报功能开发中...</text>
		</view>

		<!-- 水情组件 -->
		<WaterDetail 
			v-if="selectedReservoir && activeMainTab === 'water'"
			:station-code="selectedReservoir.stcd"
			ref="waterDetailRef"
		/>

		<!-- 风场图组件 -->
		<WindFieldCanvas 
			v-if="selectedReservoir && activeMainTab === 'windfield'"
			:center-lat="getReservoirLat()"
			:center-lng="getReservoirLng()"
			:zoom="7"
			ref="windFieldRef"
		/>
		
		<!-- 未选择水库时的提示 -->
		<view v-if="!selectedReservoir" class="empty-state">
			<text class="empty-text">请选择一个水库查看详情</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { API_BASE_URL } from '@/config/api.js'
import ReservoirDetail from '@/components/ReservoirDetail.vue'
import WaterDetail from '@/components/WaterDetail.vue'
import WindFieldCanvas from '@/components/WindFieldCanvas.vue'

// 响应式数据
const reservoirOptions = ref([])
const selectedIndex = ref(0)
const selectedReservoir = ref(null)
const reservoirDetailRef = ref(null)
const waterDetailRef = ref(null)
const windFieldRef = ref(null)
const activeMainTab = ref('rainfall') // 默认显示雨情
const activeSubTab = ref('rainfall-measured') // 默认显示雨情实测

// 获取水库列表
const fetchReservoirList = async () => {
	try {
		console.log('正在调用水库列表API:', `${API_BASE_URL}/api/get_all_reservoirs`)
		const response = await uni.request({
			url: `${API_BASE_URL}/api/get_all_reservoirs`,
			method: 'GET'
		})
		
		console.log('水库列表API响应:', response)
		if (response.data.success) {
			reservoirOptions.value = response.data.data
		}
	} catch (error) {
		console.error('获取水库列表失败:', error)
	}
}

// 水库选择变化处理
const onReservoirChange = (e) => {
	const index = e.detail.value
	selectedIndex.value = index
	selectedReservoir.value = reservoirOptions.value[index]
	
	console.log('选择的水库:', selectedReservoir.value)
	
	// 切换水库时重置到雨情实测标签页
	activeMainTab.value = 'rainfall'
	activeSubTab.value = 'rainfall-measured'
}

// 主菜单切换
const switchMainTab = (tab) => {
	activeMainTab.value = tab
	console.log('切换到主菜单:', tab)
	
	// 根据主菜单设置默认的子菜单
	if (tab === 'rainfall') {
		activeSubTab.value = 'rainfall-measured'
	} else if (tab === 'windfield') {
		activeSubTab.value = '' // 风场图没有子菜单
	}
}

// 子菜单切换
const switchSubTab = (subTab) => {
	activeSubTab.value = subTab
	console.log('切换到子菜单:', subTab)
}

// 刷新处理
const handleRefresh = () => {
	console.log('刷新流域数据')
}

// 获取水库纬度（用于风场地图中心点）
const getReservoirLat = () => {
	// 如果水库数据中有坐标信息，使用实际坐标
	// 否则使用辽宁省中心坐标作为默认值
	return selectedReservoir.value?.lat || 41.8
}

// 获取水库经度（用于风场地图中心点）
const getReservoirLng = () => {
	// 如果水库数据中有坐标信息，使用实际坐标
	// 否则使用辽宁省中心坐标作为默认值
	return selectedReservoir.value?.lng || 123.4
}

// 页面加载时获取水库列表
onMounted(() => {
	fetchReservoirList()
})
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #f5f7fa;
	padding: 0;
}

.top-toolbar {
	position: absolute;
	top: 20rpx;
	left: 20rpx;
	z-index: 100;
	background: transparent;
	padding: 0;
}

.reservoir-picker {
	width: auto;
	min-width: 200rpx;
}

.picker-container {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10rpx);
	border-radius: 24rpx;
	padding: 12rpx 16rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.picker-container:active {
	transform: scale(0.95);
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}

.picker-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32rpx;
	height: 32rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 8rpx;
	margin-right: 12rpx;
	color: white;
}

.picker-label {
	font-size: 26rpx;
	font-weight: 500;
	color: #2c3e50;
	margin-right: 8rpx;
	white-space: nowrap;
}

.picker-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6c757d;
	transition: transform 0.3s ease;
}

.picker-text {
	background: #f8f9fa;
	border: 2rpx solid #dee2e6;
	border-radius: 8rpx;
	padding: 16rpx 20rpx;
	font-size: 28rpx;
	color: #495057;
	text-align: center;
}

.tab-bar {
	display: flex;
	background: white;
	border-bottom: 2rpx solid #eee;
}

.tab-item {
	flex: 1;
	padding: 30rpx 20rpx;
	text-align: center;
	position: relative;
	transition: all 0.3s ease;
}

.tab-item.active {
	background: #f8f9fa;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 2rpx;
}

.tab-text {
	font-size: 30rpx;
	color: #6c757d;
	font-weight: 500;
}

.tab-item.active .tab-text {
	color: #2c3e50;
	font-weight: 600;
}

/* 主菜单样式 */
.main-tab-bar {
	display: flex;
	background: white;
	border-bottom: 1rpx solid #e8e8e8;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.main-tab-item {
	flex: 1;
	padding: 32rpx 20rpx 28rpx;
	text-align: center;
	position: relative;
	transition: all 0.3s ease;
	background: white;
}

.main-tab-item.active {
	background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
}

.main-tab-text {
	font-size: 32rpx;
	color: #666;
	font-weight: 500;
	transition: all 0.3s ease;
}

.main-tab-item.active .main-tab-text {
	color: #4a90e2;
	font-weight: 600;
}

.tab-indicator {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 48rpx;
	height: 6rpx;
	background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
	border-radius: 3rpx;
	animation: slideIn 0.3s ease;
}

@keyframes slideIn {
	from {
		width: 0;
		opacity: 0;
	}
	to {
		width: 48rpx;
		opacity: 1;
	}
}

/* 二级菜单样式 */
.sub-tab-bar {
	display: flex;
	background: #fafbfc;
	border-bottom: 1rpx solid #e8e8e8;
	padding: 16rpx 32rpx;
	gap: 24rpx;
}

.sub-tab-item {
	flex: 1;
	transition: all 0.3s ease;
	border-radius: 16rpx;
	overflow: hidden;
}

.sub-tab-item.active {
	background: white;
	box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.15);
	transform: translateY(-2rpx);
}

.sub-tab-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24rpx 16rpx;
	transition: all 0.3s ease;
}

.sub-tab-icon {
	font-size: 36rpx;
	margin-bottom: 8rpx;
	transition: all 0.3s ease;
}

.sub-tab-item.active .sub-tab-icon {
	transform: scale(1.1);
}

.sub-tab-text {
	font-size: 26rpx;
	color: #666;
	font-weight: 500;
	transition: all 0.3s ease;
}

.sub-tab-item.active .sub-tab-text {
	color: #4a90e2;
	font-weight: 600;
}

/* 占位内容样式 */
.forecast-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 400rpx;
	background: white;
	margin: 32rpx;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.forecast-title {
	font-size: 36rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 16rpx;
}

.forecast-desc {
	font-size: 28rpx;
	color: #999;
}

.empty-state {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400rpx;
}

.empty-text {
	color: #6c757d;
	font-size: 32rpx;
}
</style>